<template>
  <div class="api-edit-wrap">
    <div class="class_name">
      <a-form-model :model="form"
                    :rules="rules"
                    ref="ruleForm"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
                    layout="horizontal">
        <!-- 接口名称 -->
        <a-form-model-item label="接口名称"
                           prop="name">
          <a-input v-model="form.name"
                   placeholder="请输入"></a-input>
        </a-form-model-item>
        <!-- 接口类型 -->
        <a-form-model-item label="接口类型"
                           prop="interfaceType">
          <a-select v-model="form.interfaceType">
            <a-select-option value="1">读取</a-select-option>
            <a-select-option value="0">写入</a-select-option>
            <a-select-option value="3">文件</a-select-option>
            <!-- <a-select-option value="2">认证</a-select-option> -->
          </a-select>
        </a-form-model-item>
        <!-- 描述 -->
        <a-form-model-item label="描述"
                           prop="detail">
          <a-input v-model="form.detail"
                   placeholder="请输入"></a-input>
        </a-form-model-item>
        <ApiCommon :columns="responeColumns"
                   ref="apiCommonRef" />
        <div style="text-align:center;margin-top:10px">
          <ZOkButton @click="handleSave"></ZOkButton>
        </div>
      </a-form-model>
    </div>
  </div>
</template>

<script>

import { fetchSaveConnectorInstance, fetchInstanceInfo } from '../../../api/connector-manage'
import { responeColumns } from '../config'
import { sendBeforeHandle } from '../server'
import ApiCommon from './ApiCommon.vue'
import { ZOkButton } from '@zh/components-ant'
import _isEmpty from 'lodash/isEmpty'
import _cloneDeep from 'lodash/cloneDeep'

export default {
  name: 'YfConnectorEdit',
  components: { ZOkButton, ApiCommon },
  extends: null,
  mixins: [],
  props: {
    parentNode: {
      type: Object,
      default: () => null
    }
  },
  data () {
    return {
      responeColumns: responeColumns,
      labelCol: { span: 6 },
      wrapperCol: { span: 12 },
      apiInfoData: null,
      // 表单数据
      form: {
        id: '',
        name: '',
        interfaceType: '1',
        detail: ''
      },
      rules: {
        name: [{
          required: true, message: '请输入接口名称', trigger: 'blur'
        }]
      }
    }
  },
  watch: {
    parentNode: {
      handler: function (newNode) {
        if (newNode && newNode.showRightType === 'API') {
          if (!newNode.isAdd) {
            this.getApiInfo(newNode)
          } else {
            this.form = {
              id: '',
              name: '',
              interfaceType: '1',
              detail: ''
            }
          }
        }
      },
      deep: true
    }
  },
  methods: {
    async getApiInfo (node) {
      const res = await fetchInstanceInfo(node.id, node.type)
      const { connectorInterfaceVo } = res.interfaceAndParamterVo
      this.form = {
        ...connectorInterfaceVo
      }
      this.$emit('load', res)
    },
    // 保存
    handleSave () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let { form: apiForm, requestTableData, dataList: responeTableData } = this.$refs.apiCommonRef
          // 过滤掉参数字段为空的数据
          requestTableData.params = sendBeforeHandle(requestTableData.params)
          requestTableData.header = sendBeforeHandle(requestTableData.header)
          responeTableData = sendBeforeHandle(responeTableData)
          const params = {
            connectorId: this.form.id ? this.form.connectorId : this.parentNode.id,
            interfaceAndParamterVo: {
              connectorInterfaceVo: {
                ...this.form,
                interfaceAddr: apiForm.interfaceAddr,
                requestMethod: apiForm.requestMethod, // requestMethod/requestObject/responseObject 以apiCommon组件数据为准
                requestObject: apiForm.requestObject || {},
                responseObject: apiForm.responseObject || {},
                state: '1'
              },
              // 请求解析后参数
              requestParamterVo: {
                ...this.form.requestMethod == '1' ? { getParamters: requestTableData.params } : { paramterDataVoRequestList: requestTableData.params },
                headers: requestTableData.header,
                paths: requestTableData.path
              },
              // 响应解析后参数
              responseParamterVo: {
                paramterDataVoResponseList: responeTableData
              }
            }
          }
          fetchSaveConnectorInstance(params).then((response) => {
            // this.message.success(this.idNum ? '修改成功！' : '新增成功！')
            this.$emit('sucess')
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>